<template>
  <u-swiper
    v-if="lists.length"
    :list="lists"
    :mode="mode"
    :height="height"
    :effect3d="effect3d"
    :indicator-pos="indicatorPos"
    :autoplay="autoplay"
    :interval="interval"
    :circular="circular"
    :borderRadius="borderRadius"
    :current="current"
    :name="name"
    :bg-color="bgColor"
    @click="handleClick"
    @change="handleChange"
  >
  </u-swiper>
</template>

<script setup lang="ts">
import { useAppStore } from "@/stores/app";
import { navigateTo } from "@/utils/util";
import { watchEffect, computed } from "vue";
import { useRouter } from "uniapp-router-next";

const emit = defineEmits(["change"]);
const props = withDefaults(
  defineProps<{
    content?: any; // 轮播图数据
    mode?: string; // 指示器模式 rect / dot / number / none
    height?: string; // 轮播图组件高度
    indicatorPos?: string; // 指示器的位置 topLeft / topCenter / topRight / bottomLeft / bottomRight
    effect3d?: boolean; // 是否开启3D效果
    autoplay?: boolean; // 是否自动播放
    interval?: number | string; // 自动轮播时间间隔，单位ms
    duration?: number | string; // 切换一张轮播图所需的时间，单位ms
    circular?: boolean; // 是否衔接播放
    current?: number; // 默认显示第几项
    name?: string; // 显示的属性
    borderRadius?: string; //轮播图圆角值，单位rpx
    bgColor?: string; // 背景颜色
  }>(),
  {
    content: {
      data: [],
    },
    mode: "round",
    indicatorPos: "bottomCenter",
    height: "340",
    effect3d: false,
    autoplay: true,
    interval: "2500",
    duration: 300,
    circular: true,
    current: 0,
    name: "image",
    borderRadius: "0",
    bgColor: "#f3f4f6",
  }
);

const { getImageUrl } = useAppStore();

watchEffect(() => {
  try {
    const content = props?.content;
    const len = content?.data?.length;
    if (!len) return;
    for (let i = 0; i < len; i++) {
      const item = content.data[i];
      item.image =
        item.image.indexOf("http") == -1 ? getImageUrl(item.image) : item.image;
    }
  } catch (error) {
    //TODO handle the exception
    console.log("轮播图数据错误", error);
  }
});

const lists = computed(() => props.content.data || []);
const router = useRouter();

const handleClick = (index: number) => {
  console.log(props.content.data[index]?.link.type);
  if (props.content.data[index]?.link.type) {
    router.navigateTo(
      `/pages/goods_detail/goods_detail?id=${props.content.data[index]?.link.list.id}`
    );
  }
  const link = props.content.data[index]?.link;
  if (!link) return;
  navigateTo(link);
};

const handleChange = (index: number) => {
  emit("change", index);
};
</script>

<style></style>
